<template>
  <div ref="pieChart06" class="pie-chart-06 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart06 = ref(null);
const echarts = inject("$echarts");

let seriesData = [
  {
    name: '等级',
    data: [
      { value: 335, name: "Ⅰ级", selected: true },
      { value: 679, name: "Ⅱ级" },
      { value: 1548, name: "Ⅲ级" },
    ]
  },
  {
    name: '街道',
    data: [
      { value: 335, name: "娄葑街道" },
      { value: 310, name: "斜塘街道" },
      { value: 234, name: "胜浦街道" },
      { value: 135, name: "视频广告" },
      { value: 1048, name: "唯亭街道" },
      { value: 251, name: "金鸡湖街道" }
    ]
  }
];
let legendData = [];
seriesData.map(ele => {
  ele.data.map(item => {
    legendData.push(item.name);
  });
});

const option = {
  compCode: 'C202310019',
  tooltip: {
    trigger: "item",
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    top: "20%",
    right: '10%',
    data: legendData,
  },
  series: [
    {
      name: seriesData[0].name,
      type: "pie",
      selectedMode: "single",
      radius: [0, "30%"],

      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: seriesData[0].data,
    },
    {
      name: seriesData[1].name,
      type: "pie",
      radius: ["40%", "55%"],
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: seriesData[1].data,
    },
  ],
};




onMounted(() => {
  const chart = echarts.init(pieChart06.value);
  chart.setOption(option);
});
</script>
